import {useState, useContext, useEffect} from 'react';

import Table from '../../components/Table';
import { BookContext } from '../contexts/Book';

const ZustTable = ({states}) => {

  const state = states[Object.keys(states)[0]];

  const {book, fetchTable} = useContext(BookContext);

  useEffect(() => {

    console.log('fetching', state.query);
    fetchTable(state.query);

    for (let [key, entry] of Object.entries(state?.schema ?? [])) {
      if (entry.suggs?.referred) {
        console.log(key, entry);
      }
    }

  }, [states])

  const data = book[state.query.name] ?? [];

  return <Table {...{state, data}} />
}

export default ZustTable